import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export interface ListItem {
  title: string;
  desc: string;
  price: string;
  url: string;
  id: string;
}
const Index = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const navigate = useNavigate();
  const fetchData = async () => {
    const data = await axios.get("/api/list");
    setList(data.data.data);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      {list.map(v => {
        return (
          <dl
            className="list-item"
            onClick={() => navigate("/detail/" + v.id)}
            key={v.id}
          >
            <dt>
              <img src={v.url} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
            </dd>
          </dl>
        );
      })}
    </div>
  );
};
export default Index;
